<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<view class="bgcImage">
			<!-- 用户信息区域 -->
			<view class="userInfo">
				<!-- 头像 -->
				<view class="userAvatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>

				<!-- Txt -->
				<view class="userInfoTxt">
					<!-- 昵称-->
					<view class="userName">
						<open-data type="userNickName"></open-data>
					</view>

				</view>
			</view>
			<!-- 修改密码 -->
			<view class="list1">
				<block v-for="item in list1" :key="index">
					{{item.title}}
				</block>

			</view>
		</view>
		<!-- 登出 -->
		<view class="list2">
			<block v-for="item in list2" :key="index">
				<button type="warn" catchtap="{{item.method}}">{{item.title}}</button>
			</block>
		</view>
		<usertabbar :current="current" v-if="roleid===0">122232</usertabbar>
	</view>

</template>

<script>
	import usertabbar from '../../../component/tabBar/stafftabBar.vue'
	export default {
		components: {
			usertabbar
		},
		data() {
			return {
				list1: [{

					title: "修改密码",
					method: "changepsword"
				}],
				list2: [{
					title: "登出",
					method: "logout"
				}],
				roleid: 0,
				current: 2,
			};

		},
		onShow: function() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			logout: function(e) {
				console.log(1536464646);
			},

		},
	}
</script>
<style>
	page {
		background-color: rgb(240, 240, 240);
	}

	.container {
		padding: 0 0;
	}

	.bgcImage {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-color: skyblue;
	}

	.userInfo {
		position: absolute;
		left: 80rpx;
		top: 45%;
		display: flex;
		justify-content: space-between;
	}

	/* 头像 */
	.userAvatar {
		display: flex;
		overflow: hidden;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	/* 角色信息text */
	.userInfoTxt {
		margin: 10rpx 0 0 20rpx;
		color: rgb(233, 253, 253);
		letter-spacing: 3rpx;
	}

	.userName {
		margin-bottom: 10rpx;
	}

	.userAcademy {
		font-size: 20rpx;
	}

	/* 班级/专业 */
	.list1 {
		position: absolute;
		bottom: -150rpx;
		margin: 0 20rpx;
		width: 710rpx;
		height: 200rpx;
		background-color: #fff;
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
		box-shadow: #ccc 0 0 5rpx 2rpx;
		color: rgb(106, 106, 106);
	}

	/* 第二个Dialog */
	.list2 {
		margin: 0 20rpx;
		margin-top: 170rpx;
		width: 710rpx;
		height: 300rpx;
		background-color: #fff;
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
		box-shadow: #ccc 0 0 5rpx 2rpx;
		color: rgb(106, 106, 106);
	}
</style>